<!--
 * @Author: Lzx
 * @Date: 2022-04-21 08:20:04
 * @LastEditors: Lzx
 * @LastEditTime: 2022-11-12 00:42:54
 * @FilePath: /web-vue/src/pages/Housing/index.vue
 * @Description: 租房服务
-->
<template>
  <div>
    <el-row class="data-table row-panel row-panel-first">
      <el-col>
        <el-card>
          <el-row :gutter="0">
            <!-- 【房源】参数 -->
            <el-col>
              <el-form :model="queryForm" size="medium" :inline="true">
                <table style="border-collapse: collapse; width: 100%" class="table-common-style">
                  <colgroup>
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                  </colgroup>
                  <tbody>
                    <tr>
                      <td>
                        <div class="form-item-label">房源名称：</div>
                      </td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="houseTitle">
                          <el-input v-model.trim="queryForm.houseTitle" placeholder="请输入查询参数" clearable>
                          </el-input>
                        </el-form-item>
                      </td>
                      <td>
                        <div class="form-item-label">地区：</div>
                      </td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="regionId">
                          <el-cascader v-model="queryForm.regionId" :options="$store.state.DICT.regionCode" :props="{
                            expandTrigger: 'hover',
                            checkStrictly: true,
                            emitPath: false,
                            value: 'id',
                            label: 'name',
                          }" placeholder="请选择地区">
                          </el-cascader>
                        </el-form-item>
                      </td>
                      <td>
                        <div class="form-item-label">具体位置：</div>
                      </td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="detailLocation">
                          <el-input v-model.trim="queryForm.detailLocation" placeholder="请输入查询参数" clearable>
                          </el-input>
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div class="form-item-label">房源类型：</div>
                      </td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="houseType">
                          <el-select v-model="queryForm.houseType" filterable clearable placeholder="请选择查询参数"
                            @change="queryDataBtn()">
                            <el-option v-for="item in $store.state.DICT.houseTypeSelect" :key="item.code"
                              :label="item.name" :value="item.code">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </td>

                    </tr>
                    <tr>
                      <td colspan="10">
                        <!-- 按钮1 -->
                        <el-form-item>
                          <el-button type="primary" icon="el-icon-search" @click="queryDataBtn()"
                            :loading="requestLoading">查询
                          </el-button>
                          <el-button
                            icon="el-icon-refresh-left"
                            @click="
                              () =>
                                Object.assign(
                                  this.queryForm,
                                  this.$options.data().queryForm
                                )
                            "
                            >清空查询条件
                          </el-button>
                        </el-form-item>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-form>
            </el-col>
            <!-- 【房源】信息表 -->
            <el-col>
              <el-divider content-position="left">
                <h3>房源信息表</h3>
                
              </el-divider>
              <h4>为您找到{{this.page.total}}家房源</h4>
              <el-row>
                <template v-for="o in tableData">
                  <el-col :span="6" :offset="1"  :key="o.id">
                    <el-card :body-style="{ padding: '0px' }" class="house_card_list">
                      <!-- 图片 -->
                      <el-image :src="`${$store.state.API_ROOT}${o.cover}`" :preview-src-list="[
                        `${$store.state.API_ROOT}${o.cover}`,
                      ]" class="image"></el-image>
                      <!-- 正文 -->
                      <div style="padding: 14px">
                        <!-- 房型标签 -->
                        <template v-for="(item, index) in $store.state.DICT
                        .houseTypeSelect">
                          <el-tag v-if="item.code === o.houseType" :key="index" :type="item.theme">
                            {{ item.name }}
                          </el-tag>
                        </template>
                        <!-- 标题 -->
                        <div class="title">
                          {{ o.houseTitle }}
                        </div>
                        <!-- 地区 -->
                        <div>
                          
                          <el-cascader
                            v-model="o.regionId"
                            :options="$store.state.DICT.regionCode"
                            :props="{
                              expandTrigger: 'hover',
                              checkStrictly: true,
                              emitPath: false,
                              value: 'id',
                              label: 'name',
                            }"
                            size="mini"
                            disabled=""
                          >
                          </el-cascader>
                          <el-link type="info" :underline="false">{{
                            o.detailLocation
                          }}</el-link>
                        </div>
                        <!-- 价格 -->
                        <div class="price">
                          <el-tag type="danger">优惠价
                            <el-link type="danger" :underline="false">￥ {{ o.cost }}</el-link>
                          </el-tag>
                        </div>
                        <!-- 底部提示操作 -->
                        <div class="bottom clearfix">
                          <time class="time">{{ o.updateTime }}</time>
                          <el-button class="button" type="primary" icon="el-icon-more" @click="routeToDetail(o.id)">详情
                          </el-button>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </template>
              </el-row>
            </el-col>
            <!-- 分页组件 -->
            <el-col>
              <el-pagination background @size-change="handlePageSizeChange" @current-change="handleCurrentPageChange"
                :current-page="page.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="page.total" align="center">
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  DateTimeRange_Picker_Option,
  DateRange_Picker_Option,
  Date_Picker_Option,
} from "@/utils/datePicker";

export default {
  name: "houseShowList",
  components: {},

  data() {
    return {
      // 分页参数
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      // 【房源】数据表
      tableData: [],
      // 【房源】表已选 IDs
      tableCheckIds: [],
      tableCheckRows: [],
      // 数据加载
      requestLoading: false,
      // 查询表单参数
      queryForm: {
        id: null,
        houseTitle: null,
        regionId: null,
        detailLocation: null,
        houseType: null,
        provide: null,
        detail: null,
        cost: null,
        discount: null,
        command: null,
        houseStatus: null,
        organizationId: null,
        createUser: null,
        createUserName: null,
        createTime: null,
        updateUser: null,
        updateUserName: null,
        updateTime: null,
      },
      selectItem: null,
      // 日期选择快捷方式
      DateTimeRange_Picker_Option,
      DateRange_Picker_Option,
      Date_Picker_Option,
    };
  },

  // 组件创建时
  created() {
    // 页面元素初始化
  },

  // 组件挂载时
  mounted() {
    this.queryDataBtn();
  },

  methods: {
    // 表单提交后置处理
    afterSubmitHandle() {
      this.queryHouseApi();
      this.tableCheckIds = [];
      this.tableCheckRows = [];
    },

    // ---------------- 分页参数处理 START-----------------
    handleCurrentPageChange(val) {
      this.page.currentPage = val;
      // 查询【房源】表
      this.queryHouseApi();
    },
    handlePageSizeChange(val) {
      this.page.pageSize = val;
      this.page.currentPage = 1;
      // 查询【房源】表
      this.queryHouseApi();
    },
    // ---------------- 分页参数处理 END-----------------

    // 查询【房源】
    queryDataBtn() {
      this.page.currentPage = 1;
      this.queryHouseApi();
    },

    // 查询参数处理
    queryParamProcess() {
      let param = Object.assign({}, this.queryForm);
      param["pageNum"] = this.page.currentPage;
      param["pageSize"] = this.page.pageSize;

      if (this.queryForm.createTime) {
        param["createTimeStart"] = this.queryForm.createTime[0];
        param["createTimeEnd"] = this.queryForm.createTime[1];
      }
      if (this.queryForm.updateTime) {
        param["updateTimeStart"] = this.queryForm.updateTime[0];
        param["updateTimeEnd"] = this.queryForm.updateTime[1];
      }

      delete param.createTime;
      delete param.updateTime;

      return param;
    },

    // 查询【房源】API
    queryHouseApi() {
      this.requestLoading = true;

      this.$api
        .searchHouse(this.queryParamProcess())
        .then((res) => {
          this.tableData = [];
          this.page.total = 0;

          console.log(res);

          let { status, message, data } = res.data;
          if (status == 200) {
            this.tableData = data.items;
            this.page.total = data.totalNum;
          } else if (status == 403) {
            this.$message({
              message: `权限不足！${message}`,
              type: "error",
              center: true,
              duration: 1680,
            });
          } else {
            this.$alert(`暂无数据记录！${message}`, "【房源】信息表", {
              type: "info",
              confirmButtonText: "确定",
              callback: (action) => { },
            });
          }

          this.requestLoading = false;
        })
        .catch((err) => {
          this.requestLoading = false;
          console.log(`【房源】查询接口发生错误: ${err}`);
        });
    },

    // TODO-lzx 路由到详情页（详情页需要每次监听路由变化，才能实时刷新）
    routeToDetail(houseId) {
      this.$router.push({
        name: "housingDetail",
        params: {
          id: houseId,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 表单布局样式
@import "@/assets/css/form-layout.scss";

.time {
  font-size: 13px;
  color: #999;
}

.title {
  height: 66px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #ebb563;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  height: 20px;
  overflow: hidden;
}

.button {
  padding: 0;
  float: right;
}

.image {
  height: 180px;
  width: 100%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.house_card_list {
  margin-bottom: 10px;
}

.price {
  text-align: right;
}
</style>
